import NavLeft from "../../../../components/navLeft";
import { useState } from "react";
import "./index.scss";
import Emty from "../../../../components/emty";
function JackPotList() {
  const paddingStyle = {
    paddingLeft: ".16rem",
    paddingRight: ".16rem",
  };
  const [activeTab, setActiveTab] = useState(0);
  const tabChange = (index) => {
    setActiveTab(index);
  };
  return (
    <div className="page-box pledge-list-page">
      <NavLeft paddingStyle={paddingStyle} centerName={"质押记录"}></NavLeft>
      <div className="ranking-tab-box">
        <div
          className={`tab-item ${activeTab === 0 ? "active" : ""}`}
          onClick={() => tabChange(0)}
        >
          全部
        </div>
        <div
          className={`tab-item ${activeTab === 1 ? "active" : ""}`}
          onClick={() => tabChange(1)}
        >
          质押中
        </div>
        <div
          className={`tab-item ${activeTab === 2 ? "active" : ""}`}
          onClick={() => tabChange(2)}
        >
          已赎回
        </div>
      </div>
      <div className="list-box" style={paddingStyle}>
        <div className="list-item">
          <div className="item-header">
            <div className="item-title">2000.00 COIN + 200.00 USDT</div>
            <div className="item-subtitle">质押中</div>
          </div>
          <div className="item-time-option">
                2025-09-05 18:32:56
          </div>
          <div className="item-info-option">
            <div className="item-info-txt">
                获得VAULT
            </div>
            <div className="item-info-txt">
                自动赎回时间
            </div>
          </div>
           <div className="item-info-option item-info-option-margin-top-none">
            <div className="item-info-txt">
                200.32
            </div>
            <div className="item-info-txt">
                2025-09-05 18:32:56
            </div>
          </div>
        </div>

          <div className="list-item">
          <div className="item-header">
            <div className="item-title">2000.00 COIN + 200.00 USDT</div>
            <div className="item-subtitle item-subtitle-none">已赎回</div>
          </div>
          <div className="item-time-option">
                2025-09-05 18:32:56
          </div>
          <div className="item-info-option">
            <div className="item-info-txt">
                获得VAULT
            </div>
            <div className="item-info-txt">
                自动赎回时间
            </div>
          </div>
           <div className="item-info-option item-info-option-margin-top-none">
            <div className="item-info-txt">
                200.32
            </div>
            <div className="item-info-txt">
                2025-09-05 18:32:56
            </div>
          </div>
        </div>
      </div>
      <Emty hintTxt="暂无数据"></Emty>
    </div>
  );
}
export default JackPotList;
